<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>

<body>
    
    {{include './common/header.html'}}

    <!-- 主要内容区 -->
    <div class="mt-16 py-12">
        <div class="container mx-auto px-4">
            <!-- 面包屑导航 -->
            <div class="mb-8">
                <nav class="flex" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="index.html" class="text-gray-700 hover:text-blue-600">
                                <i class="fas fa-home mr-2"></i>首页
                            </a>
                        </li>
                        {{each position}}
                        <li>
                            <div class="flex items-center">
                                <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                                <a href="{{$value.path}}/index.html" class="text-gray-700 hover:text-blue-600">{{$value.name}}</a>
                            </div>
                        </li>
                        {{/each}}
                        <li>
                            <div class="flex items-center">
                                <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                                <span class="text-gray-500">文章详情</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- 左侧文章内容 -->
                <div class="lg:w-3/4">
                    <article class="bg-white rounded-lg shadow-md p-8">
                        <!-- 文章标题 -->
                        <h1 class="text-3xl font-bold mb-4">{{article.title}}</h1>
                        
                        <!-- 文章元信息 -->
                        <div class="flex items-center text-sm text-gray-500 mb-8">
                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">公司新闻</span>
                            <span class="ml-4"><i class="far fa-calendar-alt mr-2"></i>{{ dateFormat(article.updatedAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
                            <span class="ml-4"><i class="far fa-eye mr-2"></i>{{article.pv}}</span>
                            <span class="ml-4"><i class="far fa-user mr-2"></i>{{article.author || '管理员'}}</span>
                        </div>
                       
                        <!-- 文章内容 -->
                        <div class="prose max-w-none article">
                            {{@ article.content}} 
                        </div>

                        <!-- 文章标签 -->
                        <div class="mt-8 pt-8 border-t">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-600">标签：</span>
                                {{each article.tags}}
                                title="{{$value.name}}">{{$value.name}}</a>
                                <a href="/tags/{{$value.name}}.html" title="{{$value.name}}"
                                    class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">{{$value.name}}</a>
                                {{/each}}
                            </div>
                        </div>

                      
                    </article>

                    <!-- 上一篇/下一篇 -->
                    <div class="mt-8 grid grid-cols-2 gap-4">
                        {{if pre}}
                            <a href="{{pre.path}}/article-{{pre.id}}.html" class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
                                <p class="text-sm text-gray-500 mb-2">上一篇</p>
                                <p class="font-medium">{{pre.title}}</p>
                            </a>
                        {{else}}
                            <div class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
                            <p class="text-sm text-gray-500 mb-2">上一篇</p>
                            <p class="font-medium">真的没有了</p>
                        </div>
                        {{/if}}

                        {{if next}}
                            <a href="{{next.path}}/article-{{next.id}}.html" class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
                                <p class="text-sm text-gray-500 mb-2">下一篇</p>
                                <p class="font-medium">{{next.title}}</p>
                            </a>
                         {{else}}
                            <div class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
                                <p class="text-sm text-gray-500 mb-2">下一篇</p>
                                <p class="font-medium">真的没有了</p>
                            </div>
                        {{/if}}
                    </div>
                </div>

                <!-- 右侧边栏 -->
                <div class="lg:w-1/4">
                    <!-- 热门文章 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                        <h3 class="text-lg font-semibold mb-4">热门文章</h3>
                        <div class="space-y-4">
                            {{each hot}}
                            <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}" class="flex items-center gap-4 hover:bg-gray-50 p-2 rounded">
                                 {{if $value.img}}<img src="{{$value.img}}" alt="热门文章" class="w-20 h-20 object-cover rounded">{{/if}}
                                <div>
                                    <h4 class="font-medium text-gray-900 line-clamp-2">{{$value.title}}</h4>
                                    <p class="text-sm text-gray-500 mt-1"> 阅读 {{$value.pv}}</p>
                                </div>
                            </a>
                           {{/each}}
                           
                        </div>
                    </div>

                    <!-- 文章分类 -->
                    <!-- <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold mb-4">文章分类</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>公司新闻</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">12</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>行业资讯</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">24</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>外贸知识</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">18</span>
                                </a>
                            </li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
 <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
</body>
</html>